<template>
  <div class="common-table">
    <div class="table">
      <el-table
        ref="elTable"
        :data="tableData"
        :highlight-current-row="highlightCurrent"
        border
        style="width: 100%"
        @current-change="handleCurrentChange"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <template v-if="checkbox">
          <el-table-column :selectable="selectable" align="left" type="selection" width="50" />
        </template>
        <template v-if="rowSingle">
          <el-table-column align="left" width="35">
            <template v-slot="scope">
              <el-radio
                v-model="radio"
                :label="scope.$index"
                @change="rowSingleChange(scope.row, scope.$index)"
              >
                <span style="display: none">radio</span>
              </el-radio>
            </template>
          </el-table-column>
        </template>
        <slot name="table-pre-column" />
        <template>
          <el-table-column
            v-for="header in tableColumns"
            :key="header.prop"
            :fixed="header.fixed"
            :formatter="header.formatter"
            :label="header.label"
            :min-width="header.minwidth ? header.minwidth : null"
            :prop="header.prop"
            :sortable="header.sortable"
            :show-overflow-tooltip="header.showOverflowTooltip ? header.showOverflowTooltip : false"
            :width="header.width ? header.width : null"
            align="left"
          >
            <template v-if="header.children">
              <el-table-column
                v-for="subHeader in header.children"
                :key="subHeader.prop"
                :fixed="subHeader.fixed"
                :formatter="subHeader.formatter"
                :label="subHeader.label"
                :min-width="subHeader.minwidth ? subHeader.minwidth : null"
                :prop="subHeader.prop"
                :sortable="subHeader.sortable"
                :show-overflow-tooltip="
                  subHeader.showOverflowTooltip ? subHeader.showOverflowTooltip : false
                "
                :width="subHeader.width ? subHeader.width : null"
                align="left"
              />
            </template>
          </el-table-column>
        </template>
        <slot name="table-column" />
        <template v-if="operaBtns.length">
          <el-table-column :width="setOperateWidth" align="left" fixed="right" label="操作">
            <template v-slot="scope">
              <div class="operaBtns">
                <template v-for="item in operaBtns">
                  <template v-if="setShowBtn(item, scope.row)">
                    <el-button
                      :key="item.name"
                      class="icon-hover"
                      type="text"
                      @click.prevent="handleData(item, scope.$index)"
                    >
                      {{ item.name }}
                    </el-button>
                  </template>
                </template>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <div v-show="totalSize" class="page">
      <el-pagination
        :current-page="pageNo"
        :layout="pageLayout"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="totalSize"
        background
        class="textC"
        popper-class="pagination"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableMixin',
  props: {
    pageSize: {
      type: Number,
      default: function () {
        return 10
      }
    },
    totalSize: {
      type: Number,
      default: function () {
        return 0
      }
    },
    pageNo: {
      type: Number,
      default: function () {
        return 1
      }
    },
    pageSizes: {
      type: Array,
      default: function () {
        return [10, 20, 50, 100]
      }
    },
    pageLayout: {
      type: String,
      default: function () {
        return 'total, prev, pager, next, sizes, jumper'
      }
    },
    tableData: {
      type: Array,
      default: function () {
        return []
      }
    },
    tableColumns: {
      type: Array,
      default: function () {
        return []
      }
    },
    operaBtns: {
      type: Array,
      default() {
        return []
      }
    },
    checkbox: {
      type: Boolean,
      default() {
        return false
      }
    },
    rowSingle: {
      type: Boolean,
      default() {
        return false
      }
    },
    highlightCurrent: {
      type: Boolean,
      default() {
        return false
      }
    },
    setShowBtn: {
      type: Function,
      default() {
        return true
      }
    },
    selectable: {
      type: Function,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      radio: '',
      dialogVisible: false
    }
  },
  computed: {
    setOperateWidth() {
      const num = this.operaBtns.length
      let width = (num - 1) * 10 + 32
      this.operaBtns.forEach((item) => {
        width += item.name.length * 12
      })
      return `${width}px`
    }
  },
  watch: {
    tableData() {
      this.radio = ''
      this.$emit('tableDataChanged', this.tableData)
    }
  },
  created() {},
  methods: {
    sizeChange(pagesize) {
      this.$emit('sizeChange', pagesize)
    },
    pageChange(pageno) {
      this.$emit('pageChange', pageno)
    },
    handleData(item, index) {
      this.$emit('handleData', item.btn_type, this.tableData[index])
    },
    handleCurrentChange(currentRow) {
      this.$emit('handleCurrentChange', currentRow)
    },
    sortChange(obj) {
      this.$emit('sortChange', obj)
    },
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    rowSingleChange(data, index) {
      this.$emit('rowSingleChange', data, index)
    }
  }
}
</script>

<style lang="scss">
.common-table {
  .page {
    margin: 25px 0 15px 0;
  }
}
</style>
